import "./index.scss";
import TabbarBox from "../../components/tabbar";
import HeaderNav from "../../components/headerNav";
import About from "./component/about";
import { useState } from "react";
function Home() {
  const [activeTab, setActiveTab] = useState(0);
  const tabChange = (value) => {
    setActiveTab(value);
  }
  return (
    <>
      <div className="page-box home-page">
        <div className="header-home-content">
          <HeaderNav></HeaderNav>
          <div className="header-bottom-box">
            <div className="txt-option">
              <div className="txt-item">沃尔特·金库</div>
              <div className="txt-item">建DeFi新生态</div>
            </div>
            <div className="txt-option-one">
              <div className="txt-item">16384协议·引领下一代去中心化金融生</div>
            </div>
            <div className="txt-option-two">
              <div className="txt-tag">公平 · Fair</div>
              <div className="txt-tag">透明 · Open </div>
              <div className="txt-tag">高效 · Efficient</div>
            </div>
            <div className="data-box">
              <div className="data-item">
                <div className="txt-1">获得VAULT总量</div>
                <div className="txt-2">83,457.09</div>
                <div className="txt-3">VAULT</div>
              </div>

              <div className="data-item">
                <div className="txt-1">获得收益</div>
                <div className="txt-2">0.00</div>
                <div className="txt-3">USDT</div>
              </div>
            </div>

            <div className="data-box">
              <div className="data-item">
                <div className="txt-1">获得VAULT总量</div>
                <div className="txt-2">83,457.09</div>
                <div className="txt-3">VAULT</div>
              </div>

              <div className="data-item">
                <div className="txt-1">获得收益</div>
                <div className="txt-2">0.00</div>
                <div className="txt-3">USDT</div>
              </div>
            </div>

            <div className="btn-home-option">参与质押</div>
          </div>
        </div>
        <div className="home-about-box">
          <div className="about-top-box">
            <div className="about-txt">关于TOKEN</div>
            <div className="about-txt-two">VAULT Token用于整个生态的流通</div>
          </div>
          <div className="about-end-box">
            <div className="about-content-top">
              <div className="about-content-option">
                <div className="about-content-title one-txt">Token名称：</div>
                <div className="about-content-title">VAULT</div>
              </div>
              <div className="about-content-option">
                <div className="about-content-title one-txt">发行总量：</div>
                <div className="about-content-title">2100万枚</div>
              </div>
            </div>
            <div className="about-content-end">
              <div className="progess-option"></div>
              <div className="about-end-txt-option">
                <div className="txt1">Swap</div>
                <div className="txt2">矿池</div>
                <div className="txt3">市值管理</div>
              </div>
              <div className="about-end-txt-two-option">
                <div className="txt1">50万枚</div>
                <div className="txt2">2000万枚</div>
                <div className="txt1">50万枚</div>
              </div>
            </div>
          </div>
        </div>

        <div className="about-content-ranking">
          <div className="ranking-title">排行榜</div>
          <div className="ranking-txt">参与Utopia生态的TOP10排行榜</div>
          
          <div className="ranking-tab-box">
            <div className={`tab-item ${activeTab === 0 ? "active" : ""}`} onClick={() => tabChange(0)}>质押榜</div>
            <div className={`tab-item ${activeTab === 1 ? "active" : ""}`} onClick={() => tabChange(1)}>推荐榜</div>
          </div>

          <div className="ranking-box">
              <div className="ranking-item-one">
                <div className="ranking-item-1">1,205,000</div>
                <div className="ranking-item-2">USDT</div>
                <div className="ranking-item-3">0x0e8…dE903</div>
              </div>

               <div className="ranking-item-two">
                <div className="ranking-item-1">1,205,000</div>
                <div className="ranking-item-2">USDT</div>
                <div className="ranking-item-3">0x0e8…dE903</div>
              </div>

               <div className="ranking-item-three">
                <div className="ranking-item-1">1,205,000</div>
                <div className="ranking-item-2">USDT</div>
                <div className="ranking-item-3">0x0e8…dE903</div>
              </div>
          </div>

          <div className="ranking-list">
            <div className="list-header-item">
              <div className="index-item">排名</div>
              <div className="index-name">用户</div>
              <div className="index-content">总质押</div>
            </div>
            <div className="list-content-item">
              <div className="index-item">01</div>
              <div className="index-name">0x0e80d…dE396</div>
              <div className="index-content">922,389.00 USDT</div>
            </div>
             <div className="list-content-item">
              <div className="index-item">02</div>
              <div className="index-name">0x0e80d…dE396</div>
              <div className="index-content">922,389.00 USDT</div>
            </div>
            <div className="list-content-item">
              <div className="index-item">03</div>
              <div className="index-name">0x0e80d…dE396</div>
              <div className="index-content">922,389.00 USDT</div>
            </div>
          </div>
        </div>
        <About></About>
      </div>
      <TabbarBox activeName={0}></TabbarBox>
    </>
  );
}
export default Home;
